<template>
	<div class="app">
		<ul>
			<!-- 获取数据是需要$store.state.模块名.数据 -->
			<template v-for="item in $store.state.home.banners" :key="item.id">
				<li>
					{{ item.title }}
				</li>
			</template>
		</ul>

		<!-- 使用的getter时, 是直接getters.xxx -->
		<h2>Count: {{ $store.state.counter.count }}</h2>
		<!-- 没有命名空间直接获取(getters会被注册到全局store中) -->
		<!-- <h2>2 * Count: {{ $store.getters.doubleCount }}</h2> -->
		<!-- 有命名空间 -->
		<h2>2 * Count: {{ $store.getters['counter/doubleCount'] }}</h2>
		<button @click="incrementCount">+1</button>
	</div>
</template>

<script setup>
	import { useStore } from 'vuex'
	const store = useStore()

	// store.dispatch('fetchHomeMultidataAction')

	// 派发事件, 提交mutation时, 默认也是不需要根模块的
	store.dispatch('fetchHomeMultidataAction1').then((res) => console.log(res))

	function incrementCount() {
		// store.dispatch('incrementCountAction')

		store.dispatch('counter/incrementCountAction')
	}
</script>

<style scoped></style>
